<template>
  <div class="app-container">
    <div class="search-container">
      <div class="search-title">
        查询条件
      </div>
      <div class="search-form">
        <div class="form-row">
          <div class="form-column">
            <span class="column-title">姓名</span>
            <el-input v-model="queryParams.personnelName" placeholder="请输入" class="input-w150" clearable @keyup.enter.native="handleQuery" />
          </div>
          <div class="form-column">
            <span class="column-title">审核状态</span>
            <el-select v-model="queryParams.approvalStatusList" multiple placeholder="请选择" class="input-w150" clearable filterable>
              <el-option v-for="dict in approvalStatusList" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </div>
          <div class="form-column">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="body-container ">
      <div class="operation-bar">
        <div class="bar-title">
          {{ projectName }} - 成绩列表
        </div>

      </div>
      <el-table v-loading="loading" stripe :data="dataList" sortable="custom" @sort-change="handleTableSortChange">
        <el-table-column type="index" label="#" align="center" min-width="100"></el-table-column>

        <template v-for="(item, index) of headerList">
          <el-table-column :label="item.label" :sortable="(item.id !== 'personnelName' && item.id !== 'remark' && item.id !== 'honor' && item.id !== 'scoreOrder' && item.id !== 'unitAverageScore' && item.id !== 'unitScoreOrder')" :prop="item.id" align="center" min-width="150" show-overflow-tooltip :key="`${item.id}$-${index}`">
            <template v-if="item.configList && item.configList.length > 0">

              <el-table-column :label="childItem.label" min-width="120" align="center" v-for="(childItem, childIndex) of item.configList" :key="childIndex">
               <template slot-scope="childScope">
                  <template v-if="!childScope.row.edit">
                    <template v-if="childItem.id === 'cj' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'">
                      {{ childScope.row.subjectScoreMap[`${childItem.key}`].score }}
                    </template>
                    <template v-if="childItem.id === 'df' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'">
                      {{ childScope.row.subjectScoreMap[`${childItem.key}`].grade }}
                    </template>
                    <template v-if="childItem.id === 'df1' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'">
                      {{ childScope.row.subjectScoreMap[`${childItem.key}`].grade1 }}
                    </template>
                    <template v-if="childItem.id === 'df2' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'">
                      {{ childScope.row.subjectScoreMap[`${childItem.key}`].grade2 }}
                    </template>
                    <template v-if="childItem.id === 'pd' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'">
                      {{ childScope.row.subjectScoreMap[`${childItem.key}`].evaluate }}
                    </template>
                    <template v-if="childItem.id === 'df' && childItem.key==='totalScore'">
                      {{ childScope.row.totalScore }}
                    </template>
                    <template v-if="childItem.id === 'pd' && childItem.key==='totalScore'">
                      {{ childScope.row.evaluate }}
                    </template>
                  </template>
                  <template v-else>
                    <el-input-number type="number" size="mini" v-model.trim="childScope.row.subjectScoreMap[`${childItem.key}`].grade" @keyup="handleNumChange(childScope.row.subjectScoreMap[`${childItem.key}`].grade)" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'df' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'"></el-input-number>
                    <el-input-number type="number" size="mini" v-model.trim="childScope.row.subjectScoreMap[`${childItem.key}`].grade1" @keyup="handleNumChange(childScope.row.subjectScoreMap[`${childItem.key}`].grade1)" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'df1' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'"></el-input-number>
                    <el-input-number type="number" size="mini" v-model.trim="childScope.row.subjectScoreMap[`${childItem.key}`].grade2" @keyup="handleNumChange(childScope.row.subjectScoreMap[`${childItem.key}`].grade2)" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'df2' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'"></el-input-number>
                    <el-input-number type="number" size="mini" v-model.trim="childScope.row.subjectScoreMap[`${childItem.key}`].score" @keyup="handleNumChange(childScope.row.subjectScoreMap[`${childItem.key}`].score)" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'cj' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'"></el-input-number>
                    <el-input size="mini" v-model.trim="childScope.row.subjectScoreMap[`${childItem.key}`].evaluate" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'pd' && childScope.row.subjectScoreMap[`${childItem.key}`] && childItem.key!=='totalScore'"></el-input>

                    <el-input-number type="number" size="mini" v-model.trim="childScope.row.totalScore" @keyup="handleNumChange(childScope.row.totalScore)" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'df'  && childItem.key==='totalScore'"></el-input-number>
                    <el-input size="mini" v-model.trim="childScope.row.evaluate" :min="0" controls-position="right" class="input-w100" v-if="childItem.id === 'pd' && childItem.key==='totalScore'"></el-input>
                    

                  </template>
                </template>
              </el-table-column>
            </template>
            <template slot-scope="scope">
              <div v-if="!scope.row.edit">
                <el-link v-if="item.id == 'personnelName'" @click="handleToDetail(scope.row)" :underline="false" type="primary">{{ scope.row[item.id] }}</el-link>
                <span v-else class="mr4">{{ scope.row[item.id]
                      }}</span>
              </div>
              <div v-else>
                <template v-if="item.id === 'personnelName'">
                  <span class="mr4">{{ scope.row[item.id] }}</span>
                </template>
                <template v-else>
                  <el-input v-model.trim="scope.row[item.id]" maxlength="50" v-if="item.id === 'honor'"></el-input>
                </template>
              </div>
            </template>
          </el-table-column>
        </template>
        <el-table-column prop="approvalStatus" label="成绩审核状态" align="center" min-width="120">
          <template slot-scope="scope">
            <el-tag size="mini" type="warning" v-if="scope.row.approvalStatus === 1">待审核</el-tag>
            <el-tag size="mini" type="success" v-if="scope.row.approvalStatus === 2">审核通过</el-tag>
            <el-tag size="mini" type="danger" v-if="scope.row.approvalStatus === 3">审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" min-width="240" class-name="small-padding fixed-width">
          <div class="table-option" slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.approvalStatus === 1">
            <span @click="handleApp(scope.row, 2)">通过</span>
            <span @click="handleApp(scope.row, 3)" class="danger">驳回</span>
          </div>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <UserDetail :id="personnelId" :visible.sync="userDialog"></UserDetail>
  </div>
</template>
  
<script>
import { queryTrainingSubjectList, approvalPersonnelScoreApproval, findTrainingSubjectResult, delTrainingSubjectPersonnel, addOrUpdateTrainingPersonnelScore } from "@/api/subject";
import UserDetail from '@/components/userDetail.vue'
export default {
  name: "file",
  dicts: [],
  components: {
    UserDetail
  },
  data () {
    return {
      approvalStatusList: [
        { label: '待审核', value: 1 },
        { label: '审核通过', value: 2 },
        { label: '审核不通过', value: 3 }
      ],
      personnelId: '',
      userDialog: false,
      editType: 'add',
      editData: {},
      total: 0,
      editTitle: "",
      editDialog: false,
      dataList: [],
      headerList: [],
      subjectList: [],
      loading: true,
      total: 0,
      projectId: '',
      projectName: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        personnelName: undefined,
        orderBySubjectId: undefined,
        orderByType: undefined,
        approvalStatusList: [1]
      },
    };
  },
  created () {
    this.projectId = this.$route.query.projectId || ''
    this.projectName = this.$route.query.projectName || ''
    this.getHeader();
  },
  methods: {
    handleToDetail (row) {
      this.userDialog = true;
      this.personnelId = String(row.personnelId)
    },
    // 审核
    async handleApp (row, type) {
      let sourceObj = {
        "personnelIdList": [row.personnelId],
        "projectId": row.projectId,
        approvalStatus: type,
        approvalPersonnelId: this.$store.state.user.userInfo.personnelId,
        approvalIdea: '',
      }
      let res = await approvalPersonnelScoreApproval(sourceObj)
      if (res.code === 200) {
        this.$modal.msgSuccess("成功");
        this.getHeader()
      } else {
        this.$modal.msgWarning(res.msg);
      }
    },
    // 排序
    handleTableSortChange (column, prop, order) {
      this.queryParams.orderBySubjectId = column.prop
      this.queryParams.orderByType = column.order === 'ascending' ? 1 : 2
      this.handleQuery()
    },
    // 查询
    async getList () {
      this.loading = true;
      this.queryParams.projectId = this.$route.query.projectId || ''
      const res = await findTrainingSubjectResult(this.addStartDateRange(this.queryParams, this.dateRange))
      this.loading = false;
      if (res.code === 200) {
        let tmpList1 = res.rows || [];
        let tmpList = tmpList1.reverse()
        tmpList.map(item => {
          item.edit = false
          item.backData = JSON.parse(JSON.stringify(item))
          let tmpHeaderList = []
          this.headerList.map(item => {
            if (item.flag) {
              tmpHeaderList.push(item)
            }
          })
          item.subjectScoreMap = {}
          tmpHeaderList.map(headerItem => {
            let tmp = null
            if (item.subjectScoreInfoMap) {
              tmp = item.subjectScoreInfoMap[headerItem.id]
            }
            if (!tmp) {
              if (headerItem.id === 'totalScore') {
                item.subjectScoreMap['totalScore'] = {
                  key: headerItem.id,
                  evaluate: item.evaluate || '',
                  grade: 0,
                  grade1: 0,
                  grade2: 0,
                  score: item.totalScore || 0
                }
              } else {
                item.subjectScoreMap[headerItem.id] = {
                  key: headerItem.id,
                  evaluate: '',
                  grade: 0,
                  grade1: 0,
                  grade2: 0,
                  score: 0
                }
              }
            } else {
              item.subjectScoreMap[headerItem.id] = {
                key: headerItem.id,
                evaluate: tmp.evaluate,
                grade: tmp.grade,
                grade1: tmp.grade1,
                grade2: tmp.grade2,
                score: tmp.score
              }
            }

          })
        })

        this.dataList = tmpList
        this.total = res.total || 0;
      } else {
        this.dataList = [];
        this.total = 0;
      }
    },
    //  // 查询表头
    async getHeader () {
      this.loading = true;
      const res = await queryTrainingSubjectList(this.addStartDateRange({ projectId: this.$route.query.projectId || '', pageNum: 1, pageSize: 99999 }))
      this.loading = false;
      if (res.code === 200) {
        let tmpList = res.rows || []
        this.subjectList = res.rows
        let header = [
          {
            label: '姓名',
            id: 'personnelName'
          },
        ]
        tmpList.map(item => {
          if (item.configInfo) {
            let configInfo = JSON.parse(item.configInfo)
            let tmpList = Object.keys(configInfo)
            this.$set(item, 'checkList', tmpList)
            item.configList = []
            tmpList.map(tmpItem => {
              item.configList.push({
                ...configInfo[tmpItem],
                id: tmpItem,
                key: item.id
              })
            })
          }
          header.push({
            label: item.subjectName,
            id: `${item.id}`,
            flag: true,
            configList: item.configList
          })
        })
        header.push({
          label: '总成绩',
          id: 'totalScore',
          flag: true,
          configList: [
            { id: 'df', label: '得分', value: '', key: 'totalScore' },
            { id: 'pd', label: '评定', value: '', key: 'totalScore' },
          ]
        })
        header.push({
          label: '荣誉',
          id: 'honor'
        })
        header.push({
          label: '备注',
          id: 'remark'
        })
        header.push({
          label: '个人排名',
          id: 'scoreOrder'
        })
        header.push({
          label: '单位均分',
          id: 'unitAverageScore'
        })
        header.push({
          label: '单位排名',
          id: 'unitScoreOrder'
        })
        this.headerList = header
        this.getList()
      } else {
        this.dataList = [];
      }
    },
    // 查询
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        pageNum: 1,
        pageSize: 10,
        personnelName: undefined,
        orderBySubjectId: undefined,
        orderByType: undefined,
        approvalStatusList: [1]
      }
      this.handleQuery();
    }
  }
};
</script>